<%@page contentType="text/html" pageEncoding="UTF-8" isThreadSafe="true"
	session="false"%><!DOCTYPE HTML>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>micr-o-Virt</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">

	$(document).ready(function() {
		$('.tabs').tabs();
		$('.resizable').resizable();
		$('.button').button({
			text : false
		});
		$('.dialog').dialog({
			text : false,
			autoOpen : false
		});

	});
</script>

<link rel="stylesheet" type="text/css"
	href="css/jquery-ui-1.8.16.custom.css" media="all" />

<style type="text/css">
.rounded {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
}

.toolbar {
	padding: 10px;
}

.host-status {
	padding: 0px;
}

h3 {
	font-size: 12px;
}

label {
	width: 100px !important;
}

.feedback {
	font-size: 1.4em;
}

.selectable .ui-selecting {
	background: #FECA40;
}

.selectable .ui-selected {
	background: #F39814;
	color: white;
}

.selectable {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.selectable li {
	margin: 3px;
	padding: 1px;
	float: left;
	width: 100px;
	height: 80px;
	text-align: center;
	list-style: none;
}
</style>

</head>
<body>
	<div class="tabs" style="min-height: 400px;">
		<ul>
			<li><a href="#hosts">Hosts</a>
			</li>
			<li><a href="#storage">Storage</a>
			</li>
			<li><a href="#vms">VMs</a>
			</li>
			<li><a href="#templates">Templates</a>
			</li>
			<li><a href="#pools">Pools</a>
			</li>
		</ul>
		<jsp:include page="WEB-INF/jsp/hosts.jsp" />
		<jsp:include page="WEB-INF/jsp/storage.jsp" />
		<jsp:include page="WEB-INF/jsp/vms.jsp" />
		<jsp:include page="WEB-INF/jsp/templates.jsp" />
		<jsp:include page="WEB-INF/jsp/pools.jsp" />
	</div>
	<div class="tabs" style="min-height: 100px;">
		<ul>
			<li><a href="#events">events</a>
			</li>
			<li><a href="#information">information</a>
			</li>
			<li><a href="#requirments">requirements</a>
			</li>
		</ul>
		<div id="events"></div>
		<div id="information"></div>
		<div id="requirments"></div>
	</div>
</body>
</html>
